<template>
      <div id="app">
        <mt-header fixed title="小情书" style="font-size: 100%" >
            <mt-button  size="small" @click="loginFn" v-model="bb1" id="bb1" slot="right"  style="font-size: 50%" >
                {{AA}}
            </mt-button>
         <mt-button   size="small" @click="SHOW"  slot="left"  style="font-size: 50%">
                <img slot="icon" src="../assets/check.png" width="30" height="30">
            </mt-button>
        </mt-header>

        <mt-popup
                v-model="slideShow"
                position="left"
                class="p1">
                <mt-search fixed autofocus v-model="value" :result="filterResult"></mt-search>

        </mt-popup>

            <!-- 轮播图 -->
    		<mt-swipe
    		:auto="3000"
            :speed="400"
            :continuous="continuous"
            :showIndicators="showIndicators"
            :prevent="prevent"  class="mt-swipe">
    			<mt-swipe-item class="mt-swipe-item"><img src="../assets/8.jpg" alt=""  class="img"></mt-swipe-item>
    			<mt-swipe-item class="mt-swipe-item"><img src="../assets/7.jpg" alt="" class="img"></mt-swipe-item>
    			<mt-swipe-item class="mt-swipe-item"><img src="../assets/6.jpg" alt="" class="img"></mt-swipe-item>
    		</mt-swipe>

       



    <!--  推荐 -->            

      <div class="mt-button" >
       <mt-button  type="default" size="small"><img slot="icon" src="../assets/6.png" width="24" height="24">推荐</mt-button>
      <mt-button @click.native="changeTab1" type="default" size="small">古诗</mt-button>
      <mt-button @click.native="changeTab2" type="default" size="small">现代</mt-button>
      <mt-button @click.native="changeTab3" type="default" size="small">诗散文</mt-button> 
      <mt-button @click.native="changeTab4" type="default" size="small">随笔</mt-button>
      
    </div>   
    <mt-tab-container v-model="active">
        <mt-tab-container-item id="tab-container1" >
        <mt-tab-item @click.native="openMusic">
                <img src="../assets/40.png" >
                <mt-cell >
                <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">起造一座墙|徐志摩
                </mt-cell>
         </mt-tab-item>
          <mt-tab-item @click.native="openMusic1">
                <img src="../assets/43.png" >
                <mt-cell >
                <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">狂人日记|鲁迅
                </mt-cell>
           </mt-tab-item>
                 <mt-tab-item @click.native="openMusic2">
                <img src="../assets/7.jpg" >
                <mt-cell >
                   <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">《南瓜》|烟熏
                    </mt-cell>
                 </mt-tab-item>
                     <mt-tab-item @click.native="openMusic3">
                    <img src="../assets/8.jpg" >
                    <mt-cell >
                   <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">残破|鲁迅
                    </mt-cell>
                    </mt-tab-item>
                <br><br><br><br>
        </mt-tab-container-item>
        <mt-tab-container-item id="tab-container2">
        <mt-tab-item @click.native="openMusic1">
                <img src="../assets/44.png" >
                <mt-cell >
                <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">红玫瑰与白玫瑰|张爱玲
                </mt-cell>
        </mt-tab-item>

         <mt-tab-item @click.native="openMusic4">
                <img src="../assets/45.png" >
                <mt-cell >
                <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">围城|钱钟书
                </mt-cell>
          </mt-tab-item>
                <br><br><br><br>
        </mt-tab-container-item>
        <mt-tab-container-item id="tab-container3">
        <mt-tab-item @click.native="openMusic2">
                <img src="../assets/47.png" >
                <mt-cell >
                <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">活着|余华
                </mt-cell>
         </mt-tab-item>

         <mt-tab-item @click.native="openMusic3">
                <img src="../assets/46.png" >
                <mt-cell >
                <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">解忧杂货店|东野圭吾
                </mt-cell>
          </mt-tab-item>
                <br><br><br>
        </mt-tab-container-item>
        <mt-tab-container-item id="tab-container4">
        <mt-tab-item @click.native="openMusic">
                <img src="../assets/48.png" >
                <mt-cell >
                <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">论篮球修养|韩潮
                </mt-cell>
        </mt-tab-item>

        <mt-tab-item @click.native="openMusic4">
                <img src="../assets/49.png" >
                <mt-cell >
                <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">有效的沟通|马云
                </mt-cell>
         </mt-tab-item>
                <br><br><br>
        </mt-tab-container-item>
    </mt-tab-container>

   

    <!-- 导航 -->
     <mt-tabbar v-model="selected" fixed>
       <mt-tab-item id="tab-container1" @click.native="openIndex">
        <img slot="icon" src="../assets/1.png">
         关注
       </mt-tab-item>
       <mt-tab-item id="tab-container2" @click.native="openMusic">
      <img slot="icon" src="../assets/2.png">
         发现
       </mt-tab-item>
        <mt-tab-item id="tab-container3" @click.native="openFa">
        <img slot="icon" src="../assets/5.png" width="80">
       </mt-tab-item>
       <mt-tab-item id="tab-container4" @click.native="openSinger">
        <img slot="icon" src="../assets/3.png">
         消息
       </mt-tab-item>
       <mt-tab-item id="tab-container5" @click.native="openUser">
        <img slot="icon" src="../assets/4.png">
         个人
       </mt-tab-item>
    </mt-tabbar>

    </div>
</template>
<script>
import Vue from 'vue'

import { Header } from 'mint-ui';
import { Button } from 'mint-ui';
import { Cell } from 'mint-ui';
import { Tabbar, TabItem } from 'mint-ui';
import { Popup } from 'mint-ui';
import { Swipe, SwipeItem } from 'mint-ui';
import { Search } from 'mint-ui';
import { MessageBox } from 'mint-ui';
import { TabContainer, TabContainerItem } from 'mint-ui';
import { mapMutations } from 'vuex'




Vue.component('mt-tabbar', Tabbar);
Vue.component('mt-tab-item', TabItem);
Vue.component('mt-button', Button);
Vue.component('mt-header', Header);
Vue.component('mt-tab-container', TabContainer);
Vue.component('mt-tab-container-item', TabContainerItem);
Vue.component('mt-cell', Cell);
Vue.component('mt-swipe', Swipe);
Vue.component('mt-swipe-item', SwipeItem);
Vue.component('mt-popup', Popup);
Vue.component('mt-search', Search);
Vue.component('mt-tab-container', TabContainer);
Vue.component('mt-tab-container-item', TabContainerItem);



    export default {
        name:'app',
        // 数据
        data () {
            return {
                AA:'登陆',
                selected:'',
                selected:'1',
                value: '',
                defaultResult: [],
                active:'tab-container1'
                
            }
        },
        // 函数
        methods:{                  

                    SHOW(){
                        this.$store.commit("SHOW")
                    },
                    openIndex(){
        	            this.$router.push({
        	                path : '/index'
        	            })
        	        },
        	        openMusic(){
        	            this.$router.push({
        	                path : '/music'
        	            })
        	        },
        	        openSinger(){
        	            this.$router.push({
        	                path : '/singer'
        	            })
        	        },
        	        openUser(){
                         this.$router.push({
                            path : '/user'
                        })
                     },
                    openFa(){
                         this.$router.push({
                            path : '/pai'
                        })
                     },
                      openMusic1(){
                      this.$router.push({
                       path : '/music1'
                       })
                      },
        	        openMusic2(){
        	            this.$router.push({
        	                path : '/music2'
        	            })
        	        },
        	        openMusic3(){
        	            this.$router.push({
        	                path : '/music3'
        	            })
        	        },
        	        openMusic4(){
        	            this.$router.push({
        	                path : '/music4'
        	            })
        	        },
                     changeTab1(){
                        this.active = 'tab-container1'
                     },
                    changeTab2(){
                        this.active = 'tab-container2'
                     },
                    changeTab3(){
                        this.active = 'tab-container3'
                    },
                    changeTab4(){
                        this.active = 'tab-container4'
                    },                   
                    loginFn(){
                        MessageBox.prompt('请输入账号：821334453 或 qwe').then(({ value, action }) => {
                        var useID = value
                        MessageBox.prompt('请输入密码:123或 asd').then(({ value, action }) => {
                         var usePASS = value
                        if (useID == 821334453 && usePASS == 123 || useID == "qwe" && usePASS == "asd"){
                            MessageBox.alert('登陆成功!', '提示');
                             this.AA = "当前用户："+ useID
                      }else {
                             MessageBox.alert('登陆失败!', '提示');
                 }
              });
         });
    },

                    solveCloseSlideFn(that){
                         setTimeout(function(){
                            var modal = document.querySelector('.v-modal')
                            if(modal != null){
                             modal.onclick=function(){
                              that.$store.commit({
                              type :'closeSlideFn',
                        })
                    }
                }
            },50)
        },
},
        // 计算属性
        computed: {

        filterResult() {
            return this.$store.state.defaultResult.filter(value => new RegExp(this.value, 'i').test(value));
        },

        slideShow:function () {
            this.solveCloseSlideFn(this)
            return this.$store.state.slideShow
        }
            }



    }

</script>
<style>
    .mt-swipe{
    top:-12px;
    height:200px;
    }
    .img{
    height:200px;
    width:1200px;
    }


    .mt-swipe-item{
    height:180px;
    }
    .p1{
    width: 70%;
    }
    .tabcontainer{
        text-align:left;
        height:8px;
    }
    .mt-button{
    text-align:center;

    }

</style>
